<template>
  <div class="overrun_alarm">
    <one-title title="数据超规格报警" @refreshData="refresh"></one-title>
    <div class="fixed_56_top">
      <div class="multiple_search">
        <div class="search_item">
          <div class="select_label">
            任务号：
          </div>
          <div class="search_wrapper">
            <el-select v-model="taskNumber"
                       placeholder="请选择任务号"
                       filterable
                       size="small">
              <el-option
                v-for="(item, index) in taskTree"
                :key="index"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="mes_btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search_btn"
            @click="searchInfo">
          </el-button>
        </div>
      </div>
      <div class="chart_box">
        <div ref="myChart" class="chart_wrapper"></div>
      </div>
      <div class="table_container">
        <el-table
          :data="listData"
          ref="mesTable"
          max-height="440"
          v-loading="isLoading"
          border
          stripe
          tooltip-effect="dark">
          <mes-col-comp
            v-for="column in tableColConfig"
            :key="column.prop"
            :column="column"
          ></mes-col-comp>
          <el-table-column
            label="参数项目名称"
            min-width="160">
            <template slot-scope="scope">
              <span>{{scope.row.paramName}}</span>
              <span class="param_value">{{scope.row.paramValue}}</span>
              <span>{{scope.row.paramRange}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import tableColConfig from './tableColConfig'

export default {
  name: 'OverrunAlarm',
  data() {
    return {
      tableColConfig, // 表格列配置
      taskNumber: '', // 当前任务号
      isLoading: false, // 加载状态
      workStageNameList: [], // 工序名列表
      workStageList: [], // 工序数据列表
    }
  },
  computed: {
    // 任务工序树
    taskTree() {
      return this.$store.state.overrunAlarm.taskTree || []
    },
    // 表格列表数据
    listData() {
      return this.$store.state.overrunAlarm.listData || []
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    refresh() {
      this.init()
    },
    // 初始化
    async init() {
      await this.getTaskTree()
      this.searchInfo()
    },
    // 获取任务树
    getTaskTree() {
      return this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/workorder/workorder/tasknumberworkstage',
        module: 'overrunAlarm',
        state: 'taskTree'
      }).then(res => {
        if (res.length) this.taskNumber = res[0].id
      })
    },
    // 获取任务号下的数据
    getListInfo() {
      return this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/workstageparamrecord/workstageParamRecord/listoutofrangeparameter',
        data: {taskNumber: this.taskNumber},
        module: 'overrunAlarm',
        state: 'listData'
      })
    },
    // 根据任务搜索数据
    async searchInfo() {
      this.isLoading = true
      await this.getListInfo()
      await this.format()
      await this.dataZoom()
      this.isLoading = false
    },
    // 格式化表格数据
    format() {
      this.workStageNameList = []
      this.workStageList = []
      this.listData.map(item => {
        let index = this.workStageNameList.findIndex(name => name === item.workstageName)
        if (index < 0) {
          index = this.workStageNameList.length
          this.workStageNameList[index] = item.workstageName
          this.workStageList[index] = 1
        } else {
          this.workStageList[index] += 1
        }
      })
    },
    // 设置表格首屏加载工序个数
    dataZoom() {
      let dataZoom = {
        type: 'slider',
        show: false,
        showDetail: false,
        start: 0,
        end: 100,
        bottom: 10,
        height: 16,
        handleStyle: {
          /*手柄的样式*/
          color: '#fff',
          borderWidth: 2,
          borderColor: '#a1b1c1'
        },
      }
      let max = 12
      if (this.workStageNameList.length >= max) {
        dataZoom.end = Math.floor(max / this.workStageNameList.length * 100)
        dataZoom.show = true
      }
      this.drawLine(dataZoom)
    },
    // 绘制图表
    drawLine(dataZoom) {
      let myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'},
          padding: 10,
          textStyle: {fontSize: 12},
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
        },
        // 缩放,滚动
        dataZoom: dataZoom,
        // 画板边距
        grid: {
          left: '60',
          right: '60',
        },
        legend: {
          data: [
            {name: '计划工时'},
            {name: '实际工时'},
          ],
          itemWidth: 24,
          itemHeight: 10,
        },
        xAxis: [
          {
            type: 'category',
            data: this.workStageNameList,
            // x轴轴线颜色和宽度
            axisLine: {
              lineStyle: {
                color: '#dcdfe6',
                width: 2
              }
            },
            // x轴字体颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(0, 0, 0, 0.65)'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '次数',
            // Y轴虚线
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.1)',
                width: 1,
                type: 'dashed'
              }
            },
            // y轴轴线
            axisLine: {'show': false},
            //y轴刻度线
            axisTick: {'show': false},
          }
        ],
        // 数据
        series: [
          {
            name: '工序超限次数',
            type: 'bar',
            data: this.workStageList,
            barMaxWidth: 160,
            barMinHeight: 10,
            itemStyle: {
              normal: {
                color: '#1890ff',
                opacity: 0.85
              }
            }
          },
        ]
      })
    },
  }
}
</script>

<style scoped lang="less">
  .overrun_alarm{
    .chart_box {
      padding: 0 20px;
      .chart_wrapper {
        width: 100%;
        height: 500px;
        box-sizing: border-box;
        border: 1px solid #dcdfe6;
        margin-bottom: 20px;
        padding-top: 20px;
      }
    }
    .table_container{
      padding-bottom: 40px;
      .param_value{
        color: #f8000f;
      }
    }
  }
</style>
